<template>
  <div :class="['search_detail',compName == 'PageAll' ? 'active':'']" >
    <div class="top">
      <header-search :kw="kw"></header-search>
    </div>
    <div :class="['nav',isShow == false ? 'active':'']">
        <search-navbar @my-compName="tabList"
        @zhubo="getCondition"
        :square="square"
        ></search-navbar>
    </div>
    <div class="main">
        <!-- <page-all :kw="kw"></page-all> -->
    <!-- <page-album :kw="kw"></page-album> -->
    <!-- <page-sound :kw="kw"></page-sound> -->
    <!-- <page-zhubo :kw="kw"></page-zhubo> -->
    <components :is="compName" :kw="kw" @more="goMore" :condition="condition">

    </components>
    </div>

    
  </div>
</template>

<script>
import SearchNavbar from "@/views/search/searchcomp/SearchNavbar.vue";
import PageAll from "@/views/search/searchcomp/PageAll.vue";
import PageAlbum from "@/views/search/searchcomp/PageAlbum.vue";
import PageSound from "@/views/search/searchcomp/PageSound.vue";
import PageZhubo from "@/views/search/searchcomp/PageZhubo.vue";

export default {
  name: "SearchDetail",
  data(){
      return{
          kw:"",
          isShow:true,
          compName:"PageAll",
          square:0,
          condition: "relation",
      }
  },
  created(){
      this.kw = this.$route.params.id
    

  },
  
  methods:{
      tabList(val){
          this.compName = val
      },
      goMore(obj){
          this.compName = obj.compName
          this.square = obj.index
      },
      getCondition(val){
          this.condition = val
      }
  },
  components: {
    SearchNavbar,
    PageAll,
    PageAlbum,
    PageSound,
    PageZhubo
  },
  mounted(){
      document.title = this.kw + "_在线免费收听小说——欢迎来到喜玛拉雅"
      document.addEventListener('scroll',()=>{
          if(window.pageYOffset>=80){
              this.isShow = false
          }else{
              this.isShow = true
          }
      })
  },
  destroyed(){
     document.removeEventListener('scroll',document,false)
  }
};
</script>

<style lang="scss" scoped>
.search_detail{
    padding-top: 140px;
    .top{
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 999999;
    }
    .nav{
         position: fixed;
        width: 100%;
        top: 50px;
        left: 0;
        z-index: 99999;
        transition: all ease .2s;
    }
    .nav.active{
        transform: translateY(-100%);
    }
}
.search_detail.active{
    padding-top: 100px;
}

</style>

